import React from 'react';
import { Form, Input, Button, message, notification } from "antd"
import service from '../../api';
import { useDispatch } from "react-redux"
import { useNavigate } from "react-router-dom"
import "./index.scss"

const Login = () => {
    var navigate = useNavigate();
    var dispatch = useDispatch()
    const [messageApi, contextHolder] = message.useMessage();
    var onFinish = async (values: any) => {//点击登录
        var res = await service.admin.admin_login(values)
        if (res.request.status == 200) {
            navigate('/index')
            notification.success({ message: '登录成功' })
            dispatch({ type: "SAVE_TOKEN", payload: res.data[0].token })
        }
    }
    return (
        <div className='login'>
            <h1>强盛集团电商管理后台</h1>
            <Form
                className='form'
                style={{ width: 400 }}
                onFinish={onFinish}
            >
                <Form.Item

                    name="username"
                    rules={[{ required: true, message: '请输入账号' }]}
                >
                    <Input placeholder="请输入账号" />
                </Form.Item>

                <Form.Item
                    name="password"
                    rules={[{ required: true, message: '请输入密码' }]}
                >
                    <Input.Password placeholder="请输入密码" />
                </Form.Item>

                <Form.Item >
                    <Button type="primary" htmlType="submit">
                        登陆
                    </Button>
                </Form.Item>
            </Form>
            {contextHolder}
        </div>
    );
};

export default Login;